<template>
  <div class="login">
    <div class="login-title">
      <van-icon name="maintenance" style="font-size:24px;color:#e4393c" /> &nbsp 维保人员登录
    </div>
    <van-cell-group>
      <van-field v-model="loginForm.mobile" required clearable label="手机号" placeholder="请输入手机号" :error-message="errorMsg.mobile" />
      <van-field type="password" v-model="loginForm.password" required clearable label="密码" placeholder="请输入密码" :error-message="errorMsg.password" />

    </van-cell-group>
    <div class="bind-button">
      <van-button size="large" type="danger" :loading="isLoading" @click="loginSubmit" class="btn-bind">登录</van-button>
    </div>

  </div>
</template>

<script>
import { WxGetUser } from "./../../api/wx";
import { userLogin } from "./../../api/user";
import validator from "@/libs/validator";
import { GetQueryString } from "@/libs/util";
import { mapMutations, mapState } from "vuex";
export default {
  name: "bind",
  data() {
    return {
      loginForm: {
        mobile: "",
        password: "",
        wxName: "",
        openid: "",
        wxImage: "",
        token: ""
      },
      errorMsg: {
        mobile: "",
        password: ""
      },
      rules: {
        mobile: [{ required: true, message: "请输入手机号" }],
        password: [{ required: true, message: "请输入密码" }]
      },
      isLoading: false
    };
  },
  computed: {
    ...mapState({
      openid: state => state.user.openid,
      wxImage: state => state.user.wxImage,
      wxName: state => state.user.wxName
    })
  },
  created() {
    this.loginForm.openid = this.openid;
    this.loginForm.wxImage = this.wxImage;
    this.loginForm.wxName = this.wxName;
    this.validator = validator(this.rules, this.loginForm);
  },

  methods: {
    ...mapMutations({
      setUserInfo: "setWxUserInfo" // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    }),
    loginSubmit() {
      this.validate(async (errors, fields) => {
        this.isLoading = true;
        if (!errors) {
          let res = await userLogin(this.loginForm);
          if (res.code === 0) {
            this.setUserInfo(res.data);
            this.$router.replace("/user");
          } else {
            this.$toast(res.msg);
          }
        }
        this.isLoading = false;
      });
    },
    /**
     * 清除验证提示
     * @param attrs
     */
    resetField(attrs) {
      attrs = !attrs
        ? Object.keys(this.errorMsg)
        : Array.isArray(attrs)
          ? attrs
          : [attrs];
      attrs.forEach(attr => {
        this.errorMsg[attr] = "";
      });
    },
    /**
     * 验证方法
     * @param callback
     * @param data
     */
    validate(callback, data) {
      this.validator.validate((errors, fields) => {
        this.resetField();
        if (errors) {
          fields.forEach(item => {
            this.errorMsg[item.field] = item.message;
          });
        }
        callback && callback(errors, fields);
      }, data);
    },
    submit() {
      this.validate((errors, fields) => {});
    },
    reset() {
      this.data = {
        name: "",
        code: "",
        mobile: ""
      };
      this.validator.setData(this.data);
      this.resetField();
    }
  },

  components: {}
};
</script>


<style lang="scss" scoped>
.login {
  position: relative;
  background-color: $bg-color;
  height: 100vh;
  .login-title {
    padding: 20px 15px;
    display: flex;
    justify-content: center;
    font-size: 24px;
  }
  .text-title {
    padding-top: 50px;
  }
  .bind-button {
    padding: 30px 15px;
  }
}
</style>